<template>
  <div class="specializedDataPage" v-if="show">
    <div class="title">
      <div class="left">
        <i class="el-icon-document-copy" />
        <span>专用数据</span>
      </div>
      <i class="el-icon-close" @click="close"></i>
    </div>
    <div class="content">
      <div class="gridBox">
        <div class="info">
          <div class="item">
            <div class="label">上报时间：</div>
            <div class="value">{{ shipData.receive }}</div>
          </div>
          <div class="item">
            <div class="label">航速(节)：</div>
            <div class="value">{{ shipData.speed }}</div>
          </div>
          <div class="item">
            <div class="label">剩余电量：</div>
            <div class="value">{{ shipData.dl }}</div>
          </div>
          <div class="item">
            <div class="label">经度：</div>
            <div class="value">{{ shipData.lng }}</div>
          </div>
          <div class="item">
            <div class="label">纬度：</div>
            <div class="value">{{ shipData.lat }}</div>
          </div>
          <el-button
            type="primary"
            size="small"
            class="seeDetail"
            @click="seeDetail"
            >查看详情<i class="el-icon-arrow-right"
          /></el-button>
        </div>
        <div class="shipHeader">
          <div
            class="arrow"
            :style="{ transform: 'rotate(' + shipData.course + 'deg)' }"
          >
            <div
              class="courseBox"
              :style="{
                transform: 'rotate(' + getArrowRotate(shipData.course) + 'deg)',
              }"
            >
              {{ getDirection(shipData.course) }}{{ shipData.course }}度
            </div>
          </div>
        </div>
        <div class="greenLevel">
          <div class="greenLevelBox">
            <div class="greenBox" :style="getLevelStyle(shipData.greenLevel)">
              <span class="font14">{{
                getLevelColorText(shipData.greenLevel)
              }}</span
              ><i class="el-icon-caret-right" />
            </div>

            <div
              class="img"
              :style="{
                filter: `grayscale(${shipData.greenLevel == '0' ? '1' : '0'})`,
              }"
            ></div>
            <div class="greenNum">能效等级</div>
          </div>
        </div>
      </div>
      <div class="shipName">
        {{ shipData.shipNameCn }} - {{ shipData.shipNameEn }}
      </div>
    </div>
    <systemBlock></systemBlock>
    <newEnergyProprietaryData
      v-model="newEnergyProprietaryData"
    ></newEnergyProprietaryData>
  </div>
</template>
<script>
import systemBlock from "../components/newEnergyShip/systemBlock/index.vue";
import newEnergyProprietaryData from "../components/newEnergyShip/newEnergyProprietaryData.vue";
export default {
  name: "SpecializedData",
  components: { systemBlock, newEnergyProprietaryData },
  data() {
    return {
      show: true,
      shipData: {
        shipId: "CN20148x3",
        shipNameCn: "中升油9",
        shipNameEn: "ZHONG SHENG YOU 9",
        mmsi: "asdasdasd",
        shipRegNo: "xasdasd",
        lng: 114.579,
        lat: 30.5963,
        receive: "2024-09-19 17:40:50",
        course: "360",
        speed: "50",
        greenNum: "30",
        greenLevel:2,
        dl: "38%",
      },
      newEnergyProprietaryData: {
        show: false,
      },
    };
  },
  methods: {
    /**
     * 打开对话框或显示组件
     * 通过设置show属性为true来控制组件的显示与隐藏
     */
    open(shipId, mmsi, shipRegNo) {
      // console.log('船舶id:'+shipId,'船舶mmsi:'+mmsi,'船舶注册号:'+shipRegNo)
      // 上述参数没有就传空字符串 shipId:'',mmsi:'',shipRegNo:''
      this.show = true;
    },
    /**
     * 关闭组件
     *
     * 该方法通过将 `show` 属性设置为 `false`，来关闭当前的组件。
     * 它不接受任何参数，也没有返回值。
     */
    close() {
      this.show = false;
    },
    seeDetail() {},
    /**
     * 根据角度获取方向
     *
     * @param {number} angle - 风向角度，单位为度
     * @returns {string} - 返回风向的描述字符串
     */
    getDirection(angle) {
      // Normalize the angle to [0, 360)
      angle = angle % 360;
      if (angle < 0) angle += 360;

      // Determine the direction based on the angle range
      if (angle >= 337.5 || angle < 22.5) return "N";
      else if (angle >= 22.5 && angle < 67.5) return "NE";
      else if (angle >= 67.5 && angle < 112.5) return "E";
      else if (angle >= 112.5 && angle < 157.5) return "SE";
      else if (angle >= 157.5 && angle < 202.5) return "S";
      else if (angle >= 202.5 && angle < 247.5) return "SW";
      else if (angle >= 247.5 && angle < 292.5) return "W";
      else if (angle >= 292.5 && angle < 337.5) return "NW";

      // Default to North
      return "N";
    },
    getArrowRotate(angle) {
      if (angle >= 0 && angle < 90) return "0";
      else if (angle >= 90 && angle < 180) return "180";
      else if (angle >= 180 && angle < 270) return "180";
      else if (angle >= 270 && angle <= 360) return "0";
    },
    getLevelColorText(num) {
      let colorText = "";
      switch (num) {
        case 1:
          colorText = "一级";
          break;
        case 2:
          colorText = "二级";
          break;
        case 3:
          colorText = "三级";
          break;
        case 0:
          colorText = "未知";
          break;
      }
      return colorText;
    },
    getLevelStyle(num) {
      let left = "15px";
      let top = "22px";
      let color = "#32773b";
      switch (num) {
        case 1:
          left = "11px";
          top = "80px";
          color = "#B6D6A5";
          break;
        case 2:
          left = "13px";
          top = "50px";
          color = "#7BA678";
          break;
        case 3:
          left = "15px";
          top = "15px";
          color = "#32773b";
          break;
        case 0:
          left = "9px";
          top = "105px";
          color = "#B54B2F";
          break;
      }
      return {
        left,
        top,
        color,
      };
    },
  },
};
</script>
<style scoped lang="scss">
.specializedDataPage {
  position: absolute;
  bottom: 65px;
  left: 435px;
  z-index: 100;
  /* width: 1130px; */
  width: calc(100vw - 435px - 435px);
  height: 729px;
  padding: 0;
  background-color: #fff;
  transition: bottom 0.3s ease-in-out;
  background: #151515;
  box-shadow: 0px 5px 27px 0px rgba(0, 0, 0, 0.14);
  border-radius: 4px;
  display: flex;
  flex-direction: column;

  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 45px;
    background: #f7f8fa;
    border-radius: 4px 4px 0px 0px;
    padding: 0 20px;

    .left {
      font-weight: bold;
      font-size: 16px;
      color: #4981e6;
      line-height: 20px;

      i {
        margin-right: 3px;
      }
    }

    .el-icon-close {
      cursor: pointer;
      color: #333;
      font-size: 24px;
      transition: all 0.3s;

      &:hover {
        color: #4981e6;
      }
    }
  }

  .content {
    width: calc(100% - 40px);
    padding: 0 16px;
    height: 245px;
    margin-left: 20px;
    margin-top: 16px;
    background: #242424;
    box-shadow: 0px 0px 27px 0px rgba(247, 248, 250, 0.47) inset;
    border-radius: 11px;
    border: 1px solid #d2d2d2;
    overflow: hidden;
    box-sizing: border-box;

    .gridBox {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);

      .info {
        width: 100%;

        .item {
          width: 100%;
          display: flex;
          align-items: center;
          line-height: 1;

          &:not(:last-child) {
            margin-top: 15px;
          }

          .label {
            width: 70px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: 14px;
            color: #b8b7b7;
          }

          .value {
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: 14px;
            color: #ffffff;
          }
        }

        .seeDetail {
          margin-top: 16px;
        }
      }

      .shipHeader {
        width: 100%;
        height: 202px;
        margin-top: 12px;
        position: relative;
        background: url("@/assets/newEnergyShip/ship.png") no-repeat center
            center/40px 94px,
          url("@/assets/newEnergyShip/pan.png") no-repeat center center/202px
            202px;

        .arrow {
          position: relative;
          width: 14px;
          height: 101px;
          left: 0;
          right: 0;
          margin: auto;
          transform-origin: 50% 100%;
          transform: rotate(0);
          background: url("@/assets/newEnergyShip/arrowTop.png") no-repeat top
            15px center/14px auto;

          .courseBox {
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: -4px;
            color: #fff;
            left: -100px;
            right: -100px;
            z-index: 1;
            white-space: nowrap;
            font-size: 12px;
          }
        }
      }

      .greenLevel {
        display: flex;
        justify-content: center;
        align-items: center;

        .greenLevelBox {
          position: relative;
          width: 180px;
          height: 180px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .greenBox {
            display: flex;
            align-items: center;
            position: absolute;
            top: 22px;
            left: 15px;
            font-family: Source Han Sans CN;
            font-weight: 800;
            font-size: 17px;
            color: #32773b;
            .font14 {
              font-size: 14px;
            }
          }

          .img {
            width: 74px;
            height: 112px;
            background: url("@/assets/newEnergyShip/greenLevelBox.png")
              no-repeat scroll 0 0 / auto 112px;
          }

          .greenNum {
            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: 14px;
            color: #ffffff;
            margin-top: 8px;
          }
        }
      }
    }

    .shipName {
      text-align: center;
      font-family: Source Han Sans CN;
      font-weight: bold;
      font-size: 14px;
      color: #6bdef3;
    }
  }
}
</style>
